<template>
  <div class="position">
    <!-- 定位 -->
    <div class="position-header">
      <i class="iconfont icon-angle-left" @click="$router.go(-1)"></i>
      <p>城市选择</p>
      <p></p>
    </div>
    <div class="position-nav">
      <baidu-map @ready="handler"></baidu-map>
      <div class="current">当前定位：{{ city.address }}</div>
    </div>
    <div class="hots">
      <p>热门城市</p>
      <van-cell v-for="(val, i) in hotList" :key="i" :title="val.label" />
    </div>
    <div class="citys">
      <!-- abcd城市渲染 -->
      <van-index-bar :index-list="cityList">
        <div v-for="(item, ind) in TwoCityList" :key="ind">
          <van-index-anchor :index="item.keys"></van-index-anchor>
          <van-cell
            v-for="(val, i) in item.citys"
            :key="i"
            :title="val.label"
          />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { cPinyin } from "@/utils/index.js";
import axios from "axios";
export default {
  name: "position",
  data() {
    return {
      //address: "定位中...",
      cityList: [], //城市数据,
      TwoCityList: [], //需要遍历的城市数组
      hotList: [],
    };
  },
  created() {
    this.getCity();
    this.getHot();
  },
  computed: {
    ...mapState(["city"]),
  },
  methods: {
    //获取所有城市
    ...mapMutations(["ACTIVE"]),
    getCity() {
      axios.get("/area/city?level=1").then((res) => {
        console.log(res, "city");
        let cityList = res.data.body.map((item) => {
          //截取--slice
          return {
            ...item,
            //拼音转字母大写
            ct: cPinyin(item.pinyin.toUpperCase().slice(0, 1)),
          };
        });
        console.log(cityList);
        //去重---new set
        let newArr = Array.from(new Set(cityList.map((item) => item.ct)));
        console.log(newArr);
        //  排序---sort A,B,C,D....
        this.cityList = newArr.sort((a, b) => {
          return a.charCodeAt(0) - b.charCodeAt(0);
        });
        this.TwoCityList = this.cityList.map((item) => {
          // 过滤--filter
          return {
            keys: item,
            citys: cityList.filter((val) => val.ct === item),
          };
        });
      });
    },
    handler({ BMap }) {
      var geolocation = new BMap.Geolocation();
      const that = this;
      geolocation.getCurrentPosition(function (city) {
        that.ACTIVE(city.address.city);
        console.log(city.address.city);
        // console.log(this.ACTIVE)
      });
    },
    // 热门城市请求
    getHot() {
      axios.get("/area/hot").then((res) => {
        console.log(res, "热门城市");
        this.hotList = res.data.body;
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.position {
  width: 100%;
  height: 100%;
}
.position-header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #f6f5f6;
  display: flex;
  justify-content: space-between;
}
.current {
  padding-left: 0.1rem;
  height: 0.6rem;
  color: #999;
  font-size: 13px;
  line-height: 0.6rem;
}
.hots {
  width: 100%;
  height: 4rem;
  p {
    padding-left: 0.1rem;
    color: #999;
  }
}
</style>